<template>
  <div id="waypoint" class="m-container-small m-padded-tb-big animated fadeIn">
    <div class="ui container">
      <div class="ui top attached segment">
        <div class="ui horizontal link list" style="margin-left: -60%">
          <div class="item">
            <img :src="user.avatar" alt="" class="ui avatar image">
            <div class="content"><a href="#" class="header">{{user.nickname}}</a></div>
          </div>
          <div class="item">
            <i class="calendar icon"></i> <span>{{dateFormat(blog.updateTime)}}</span>
          </div>
          <div class="item">
            <i class="eye icon"></i> <span>{{blog.views}}</span>
          </div>
        </div>
      </div>
      <div class="ui attached segment">
        <!--图片区域-->
        <img :src="blog.firstPicture" alt="" class="ui fluid rounded image">
      </div>
      <div class="ui  attached padded segment">
        <!--内容-->
        <div class="ui right aligned basic segment">
          <div class="ui orange basic label">{{blog.flag}}</div>
        </div>

        <h2 class="ui center aligned header" v-text="blog.title"></h2>
        <br>
        <!--中间主要内容部分-->
        <div id="content" class="typo typo-selection js-toc-content m-padded-lr-responsive m-padded-tb-large" v-html="blog.content"></div>

        <!--标签-->
        <div class="m-padded-lr-responsive">
          <div class="ui basic teal left pointing label" v-for="tag in blog.tags">{{tag.name}}</div>
        </div>

        <!--赞赏-->
        <div v-if="blog.appreciation">
          <div>
            <div class="mask" v-if="showModal" @click="showModal=false"></div>
            <div class="pop" v-if="showModal" style="width: 360px; height: 220px; left: 38%; border-radius: 20px; border: 2px solid #f6a671">
              <br>
              <div style="margin: auto">
                <div style="float: left; margin-left: 20px">
                  <img src="../assets/images/wechat.png" style="width: 150px; height: 150px; border: 1px solid #00d95a">
                  <div style="color: #00d95a">微信</div>
                </div>
                <div style="float: left; margin-left: 20px">
                  <img src="../assets/images/wechat.png" style="width: 150px; height: 150px; border: 1px solid #2C7EEA">
                  <div style="color: #2C7EEA">支付宝</div>
                </div>
              </div>
            </div>
            <button @click="showModal=true" class="btn">赞赏</button>
          </div>
        </div>
      </div>
      <div class="ui attached positive message">
        <!--博客信息-->
        <div class="ui middle aligned grid">
          <div class="eleven wide column">
            <ui class="list">
              <li>作者：<span>{{user.nickname}}</span><a href="/about" target="_blank">（联系作者）</a></li>
              <li>发表时间：<span>{{dateFormat1(blog.updateTime)}}</span></li>
              <li>版权声明：自由转载-非商用-非衍生-保持署名（创意共享3.0许可证）</li>
              <li>公众号转载：请在文末添加作者公众号二维码</li>
            </ui>
          </div>
          <div class="five wide column">
            <img src="../assets/images/wechat.png" alt="" class="ui right floated rounded bordered image" style="width: 110px">
          </div>
        </div>
      </div>
      <div class="ui bottom attached segment" v-if="blog.commentabled">
        <!--留言区域列表-->
        <div id="comment-container"  class="ui teal segment">
          <div>
            <div class="ui threaded comments" style="max-width: 100%;">
              <h3 class="ui dividing header">评论</h3>
              <div class="comment" v-for="comment in comments">
                <a class="avatar">
                  <img :src="comment.avatar">
                </a>
                <div class="content">
                  <div >
                    <a class="author">
                      <span style="float: left; left: 10px">{{comment.nickname}}</span>
                      <div class="ui mini basic teal left pointing label m-padded-mini" v-if="comment.adminComment">博主</div>
                    </a>
                    <div class="metadata" style="float: left; left: 10px">
                      <span class="date" >{{dateFormat1(comment.createTime)}}</span>
                    </div>
                  </div>
                  <br>
                  <div class="text" style="width: 90%; height: 80%; text-align: left; padding-left: 0px">
                    {{comment.content}}
                  </div>
                  <div class="actions" style="text-align: left; padding-left: 0px;">
                    <a class="reply" data-commentid="1" data-commentnickname="Matt" @click="replyCom(comment.id,comment.nickname)">回复</a>
                  </div>
                </div>

                <div class="comments" v-if="comment.replyComments.length>0">
                  <div class="comment" v-for="reply in comment.replyComments">
                    <a class="avatar">
                      <img :src="reply.avatar">
                    </a>
                    <div class="content" style="margin: auto">

                      <!-- 评论者及时间 -->
                      <div style="width: 90%; text-align: left; padding-left: 7%">
                        <a class="author" style="margin: auto">
                          <span style="float: left; left: 10px">{{reply.nickname}}</span>
                          <div class="ui mini basic teal left pointing label m-padded-mini" style="float: left; left: 10px" v-if="reply.adminComment">博主</div>
                          <span class="m-teal" style="text-align: left; padding-left: 6px">@ {{reply.parentComment.nickname}}</span>
                        </a>
                        <div class="metadata" style="text-align: left; padding-left: 6px">
                          <span class="date">{{dateFormat1(reply.createTime)}}</span>
                        </div>
                      </div>

                      <!--评论内容本身-->
                      <div class="text" style="width: 90%; height: 80%; text-align: left; padding-left: 7%">
                        {{reply.content}}
                      </div>

                      <!--回复-->
                      <div class="actions" style="width: 90%; text-align: left; padding-left: 7%">
                        <a class="reply" data-commentid="1" data-commentnickname="Matt" @click="replyCom(reply.id,reply.nickname)">回复</a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div id="comment-form" class="ui form" ref="commentReply">
          <input type="hidden" name="blog.id">
          <input type="hidden" name="parentComment.id" value="-1">
          <div class="field">
            <textarea v-model="content" :placeholder=placeholder ref="cursor" :style="$store.state.commentContent"></textarea>
          </div>
          <div class="fields">
            <div class="field m-mobile-wide m-margin-bottom-small">
              <div class="ui left icon input">
                <i class="user icon"></i>
                <input type="text" v-model="nickname" placeholder="姓名" :style="$store.state.nickname">
              </div>
            </div>
            <div class="field m-mobile-wide m-margin-bottom-small">
              <div class="ui left icon input">
                <i class="mail icon"></i>
                <input type="text" v-model="email" placeholder="邮箱" :style="$store.state.email">
              </div>
            </div>
            <div class="field  m-margin-bottom-small m-mobile-wide">
              <button id="commentpost-btn" type="button" class="ui teal button m-mobile-wide" @click="postComment()"><i class="edit icon"></i>发布</button>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>

  <div id="toolbar" class="m-padded m-fixed m-right-bottom" style="display: none">
    <div class="ui vertical icon buttons ">
      <button type="button" class="ui toc teal button" >目录</button>
      <a href="#comment-container" class="ui teal button" >留言</a>
      <button class="ui wechat icon button"><i class="weixin icon"></i></button>
      <div id="toTop-button" class="ui icon button" ><i class="chevron up icon"></i></div>
    </div>
  </div>

  <div class="ui toc-container flowing popup transition hidden" style="width: 250px!important;">
    <ol class="js-toc">

    </ol>
  </div>

  <div id="qrcode" class="ui wechat-qr flowing popup transition hidden" style="width: 130px !important;">
    <!--<img src="./static/images/wechat.png" alt="" class="ui rounded image" style="width: 120px !important;">-->
  </div>
</template>

<script>
import axios from "axios";
import UserBase from "@/views/UserBase";
import dialogComponent from "@/views/DialogComponent";
import {scrollToLocation} from "@/util";

export default {
  name: "Blog",
  components:{
    dialogComponent
  },
  data(){
    return {
      blog: '',
      blogId: '',
      user: '',
      visible: false,
      id: '',
      showModal: false,
      comments: [],
      content: '',   //评论内容
      nickname: '',  //评论者昵称
      email: '',     //评论者email
      commentId: '',  //父评论id
      commentNickName: '', //父评论者昵称
      placeholder: '请输入评论信息...'
    }
  },
  mounted() {
    this.getBlog();
  },
  watch: {
    content:function (){
      if (this.content.length>0){
        this.$store.commit('clearContentColor');
      }
    },
    nickname:function (){
      if (this.nickname.length>0){
        this.$store.commit('clearNickname');
      }
    },
    email:function (){
      if (this.email.length>0){
        this.$store.commit('clearEmail');
      }
    },
    commentNickName:function (){
      if (this.commentNickName.length>0){
          this.placeholder="@"+this.commentNickName;
      }
    }
  },
  methods: {
    postComment(){
      if (this.content.length === 0 || this.email.length === 0 || this.nickname.length === 0){
        if (this.content.length === 0){
          this.$store.commit('setContentColor');
        }
        if (this.email.length === 0){
          this.$store.commit('setEmail');
        }
        if (this.nickname.length === 0){
          this.$store.commit('setNickname');
        }
      }else {
        axios({
          method: "post",
          url: "http://localhost:7070/comment/post",
          data: {
            blogId: this.blogId,
            nickname: this.nickname,
            email: this.email,
            content: this.content,
            parentCommentId: this.commentId
          }
        }).then((res) => {
          if (res.data === 1){
            axios.get('http://localhost:7070/comment/'+this.blogId).then((res)=>{
              this.comments = res.data;
              this.content = '';
              this.email = '';
              this.nickname = '';
              // alert(this.blog.user);
            })
            // var com = this.comments;
            // for (var co in com){
            //
            // }
            // this.comments.forEach()
            // window.location.reload();
          }else {
            alert("发布失败")
          }
        });

        // alert(this.blogId);
        // alert("校验成功");
      }

    },
    replyCom(id,nickname){
      this.commentId = id;
      this.commentNickName = nickname;
      document.getElementById('comment-form').scrollIntoView();
      this.$nextTick(() => {  //cursor
        this.$refs.cursor.focus();   //光标定位
      })
    },
    dateFormat(time) {
      var date=new Date(time);
      var year=date.getFullYear();
      /* 在日期格式中，月份是从0开始的，因此要加0
       * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
       * */
      var month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()+1;
      var day=date.getDate()<10 ? "0"+date.getDate() : date.getDate();
      var hours=date.getHours()<10 ? "0"+date.getHours() : date.getHours();
      var minutes=date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes();
      var seconds=date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds();
      // 拼接
      // return year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds;
      return year+"-"+month+"-"+day;
    },
    dateFormat1(time) {
      var date=new Date(time);
      var year=date.getFullYear();
      /* 在日期格式中，月份是从0开始的，因此要加0
       * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
       * */
      var month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()+1;
      var day=date.getDate()<10 ? "0"+date.getDate() : date.getDate();
      var hours=date.getHours()<10 ? "0"+date.getHours() : date.getHours();
      var minutes=date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes();
      var seconds=date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds();
      // 拼接
      return year+"-"+month+"-"+day+" "+hours+":"+minutes;
      // return year+"-"+month+"-"+day;
    },
    getBlog(){
      this.blogId = this.$store.state.blogId;
      // alert(this.blogId);
      axios.get('http://localhost:7070/blog/'+this.blogId).then((res)=>{
        this.blog = res.data.blog;
        this.user = res.data.user;
        this.comments = res.data.comments;
        console.log(this.user);
        console.log(this.comments);
        // alert(this.blog.user);
      })
    }
  }
}
</script>

<style scoped>


.mask {
  background-color: #000;
  opacity: 0.3;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1
}
.pop {
  background-color: white;
  position: fixed;
  top: 150px;
  left: 42%;
  width: 300px;
  height: 300px;
  z-index: 2
}
.btn {
  background-color: white;
  border-radius: 15px;
  border: 2px solid #f6a671;
  padding: 4px 12px;
}


</style>